import type {FC} from 'react';
import React from 'react';
import {Avatar, Card, Image, List, Popover, Spin,} from 'antd';

import {PageContainer} from '@ant-design/pro-layout';
import {useRequest} from 'umi';

import {abList, addFakeList, removeFakeList, updateFakeList} from './service';
import type {BasicListItemDataType} from './data.d';
import styles from './style.less';
import {useModel} from "@@/plugin-model/useModel";

const ListContent = ({
                       data: {
                         certificateType,
                         evaluationGrade,
                         validityPeriod,
                         certificateFile,
                         reportFile,
                         archiveStatus,
                         auditNum,
                         needAuditNum
                       }
                     }, code: any) => (
  <div className={styles.listContent}>
    <div className={styles.listContentItem}>
      <span>类型</span>
      <p>{certificateType}</p>
    </div>
    <div className={styles.listContentItem}>
      <span>级别</span>
      <p>{evaluationGrade}</p>
    </div>
    <div className={styles.listContentItem}>
      <span>有效期</span>
      <p>{validityPeriod}</p>
    </div>
    <div className={styles.listContentItem}>
      <span>状态</span>
      <p>{needAuditNum > auditNum ? <Popover content={"请联系0371-55901300"}><span style={{color: "red"}}>需年审</span>
      </Popover> : archiveStatus}</p>
    </div>
    <div className={styles.listContentItem}>
      <span>证书</span>
      <p><a href={certificateFile} target={'_blank'}>查看</a></p>
    </div>
    <div className={styles.listContentItem}>
      <span>报告</span>
      <p><a href={reportFile} target={'_blank'}>查看</a></p>
    </div>
    <div className={styles.listContentItem}>
      {/*{code}*/}
      {/*<Image width={60} alt="企业档码" src={code}/>,*/}
    </div>
  </div>
);

export const AbQueryList: FC = () => {
  const {initialState} = useModel('@@initialState');
  const loading1 = (
    <span className={`${styles.action} ${styles.account}`}>
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    </span>
  );

  if (!initialState) {
    return loading1;
  }

  const {currentUser} = initialState;

  if (!currentUser || !currentUser.name) {
    return loading1;
  }

  const {
    data: listData,
    loading,
    mutate,
  } = useRequest(async () => {
    return await abList({}, currentUser.code);
  });
  const {run: postRun} = useRequest(
    (method, params) => {
      if (method === 'remove') {
        return removeFakeList(params);
      }
      if (method === 'update') {
        return updateFakeList(params);
      }
      return addFakeList(params);
    },
    {
      manual: true,
      onSuccess: (result) => {
        mutate(result);
      },
    },
  );
  const list = listData || [];
  return (
    <div>
      <PageContainer waterMarkProps={{content: ''}}>
        <div className={styles.standardList}>

          <Card
            className={styles.listCard}
            bordered={false}
            title="安全生产标准化档案"
            style={{marginTop: 24}}
            bodyStyle={{padding: '0 32px 40px 32px'}}
          >
            <List
              size="large"
              rowKey="id"
              loading={loading}
              pagination={false}
              // pagination={paginationProps}
              dataSource={list}
              a
              renderItem={(item) => {
                return (
                  <List.Item actions={[<Image width={60} src={"/v2/open/common/code/ab/" + currentUser.code}
                                              alt={'企档码'}></Image>]}>
                    <List.Item.Meta
                      avatar={<Avatar src="/ab.svg" shape="square" size="large"/>}
                      // avatar={<Image width={60} src={"/v2/open/common/code/ab/" + currentUser.code}></Image>}
                      title={item.enterpriseName}
                      description={item.creditCode}
                    />
                    <ListContent data={item} code={"/v2/open/common/code/ab/" + currentUser.code}/>
                  </List.Item>
                )
              }}
            />
          </Card>
        </div>
      </PageContainer>
    </div>
  );
};
export default AbQueryList;
